<script setup xmlns:el-table="http://www.w3.org/1999/html">
import { ref } from 'vue'
// 导入axios函数
import axios  from "axios";
import {deptGetAllService} from "./api/dept.js";
const depts = ref([])
// 获取所有部门信息
const getAllDept=async function(){
  let data = await deptGetAllService()
  depts.value = data
}
getAllDept()
</script>

<template>
  <h2>部门信息表</h2>
  <el-table :data="depts" style="width: 100%">
  <el-table-column prop="id" label="ID"/>
    <el-table-column prop="name" label="部门名"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary">修改</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <table>-->
<!--    <thead>-->
<!--      <tr>-->
<!--        <th>Id</th>-->
<!--        <th>部门名</th>-->
<!--        <th>操作</th>-->
<!--&lt;!&ndash;        <th>修改时间</th>&ndash;&gt;-->
<!--      </tr>-->
<!--    </thead>-->
<!--    <tr v-for="(dept, index) in depts" :key="index">-->
<!--      <td>{{    dept.id }}</td>-->
<!--      <td>{{    dept.name }}</td>-->
<!--&lt;!&ndash;      <td>{{    dept.createTime }}</td>&ndash;&gt;-->
<!--&lt;!&ndash;      <td>{{    dept.updateTime }}</td>&ndash;&gt;-->
<!--      <td>-->
<!--        <button>修改</button>-->
<!--        <button>删除</button>-->
<!--      </td>-->
<!--    </tr>-->
<!--  </table>-->
</template>

<style scoped>
</style>